<h1 mat-dialog-title>Create Account</h1>
<div mat-dialog-content>
    <form [formGroup]="memberForm">
        <mat-checkbox formControlName="isActive">Active
        </mat-checkbox>
        <br>
        <mat-form-field class="insert-full-width">
            <input matInput type="text" formControlName="name" placeholder="Name" required>
        </mat-form-field>
        <br>
        <mat-form-field class="insert-full-width">
            <input matInput #inputAcc type="text" maxlength="20" formControlName="account" placeholder="Account" required>
            <mat-hint align="end">{{inputAcc.value?.length || 0}}/20</mat-hint>
        </mat-form-field>&nbsp;

        <mat-form-field class="insert-full-width">
            <input matInput #inputPw type="text" maxlength="20" formControlName="password" placeholder="Password" required>
            <mat-hint align="end">{{inputPw.value?.length || 0}}/20</mat-hint>
        </mat-form-field>
        <br>

        <mat-form-field class="insert-full-width">
            <input matInput #inputMail type="text" maxlength="40" formControlName="email" placeholder="Email" [errorStateMatcher]="matcher">
            <mat-hint align="end">{{inputMail.value?.length || 0}}/40</mat-hint>
            <mat-error *ngIf="memberForm.hasError('email')">
                Please enter a valid email address
            </mat-error>
        </mat-form-field>
      
    </form>
</div>
<div mat-dialog-actions>
    <button mat-raised-button color="primary" (click)="onNoClick()">Cancel</button>
    <button mat-raised-button color="primary" (click)="onYesClick(memberForm.value)" [disabled]="!memberForm.valid">Confirm</button>
</div>